import React, { useState, useContext, useMemo } from 'react'
import { Form, Input, Button, Select } from 'antd';
import "./SearchList.scss"
import IMSearchBar from '../../../components/IMSearchBar';
import { Context } from '../index'
import { Option } from 'antd/lib/mentions';
const SearchList = () => {
    const { state: { classify }, dispatch, ActionState } = useContext(Context)
    const handleSearch = (search: any) => {
        dispatch({ type: ActionState?.SET_SEARCH, payload: search })
    }
    const clasifyOptions = useMemo(() => {
        return classify && classify.map(item => <Option value={item.id.toString()}>{item.classify_name}</Option>)
    }, [classify])
    return (
        <IMSearchBar handleSearch={handleSearch}>
            <Form.Item label="关键字" name="keyword">
                <Input placeholder="请输入名称、url、作者" />
            </Form.Item>
            <Form.Item label="图片分类" name="classify">
                <Select
                    allowClear={true}
                    mode="multiple"
                    className="im_pic_list_search_form_select"
                    placeholder="请选择">
                    {clasifyOptions}
                </Select>
            </Form.Item>
        </IMSearchBar>
    )

}

export default SearchList